<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>产品详情</title>
    <link rel="stylesheet" href="../../css/ui.min.css"/>
    <link rel="stylesheet" href="../../css/iconfont.css"/>
    <link rel="stylesheet" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/mui.min.css"/>
    <script src="../../js/jquery-2.1.4.js"></script>
    <script src="../../js/swiper.min.js"></script>
    <script src="../../js/poup.js"></script>
</head>
<body ontouchstart>
<header class="ui-header ui-header-transparent">
	<a href="" class="ui-icon hd-left">
		<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="margin-top:1rem;"></span>
	</a>
	<a href="javascript:;" class="ui-icon open-popup hd-right" data-target="#share">
		<span class="iconfont icon-share"></span>
	</a>
</header>
<div class="ui-content">
	<div class="group-wrap">
		<div class="swiper-container swiper-goods">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../../images/slide.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../images/slide.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../images/slide.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../images/slide.jpg" alt=""></div>
				<div class="swiper-slide"><img src="../../images/slide.jpg" alt=""></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="goods-preview">
			<div class="goods-title">御泥坊水光黑面膜补水保湿清洁毛孔提亮肤色玻尿酸面膜贴官网正品</div>
			<div class="goods-promo-panel">
				<em class="tm-yen">¥</em><span class="tm-price">89.00</span><del>¥288</del><span class="mom-tag">包邮</span>
			</div>
			<div class="goods-desc">补水，保湿，皮肤嫩嫩滑滑的，所有肤质都可以用的，不会过敏，不舒服，面膜敷着很舒服 一点也不刺激，性价比真的很高的。</div>
			<div class="goods-attr">
				<span class="item"><i class="iconfont icon-dot"></i>满88包邮</span>
				<span class="item"><i class="iconfont icon-dot"></i>不支持退货</span>
				<span class="item"><i class="iconfont icon-dot"></i>假一赔十</span>
			</div>
		</div>
	</div>
	<div class="group-wrap">
		<div class="module-sku open-popup" data-target="#skuG">
			<div class="skuText">
			  <div class="l">选择</div>
			  <div class="r">可选 规格</div>
			  <div class="iconfont icon-moreread"></div>
			</div>
		</div>
	</div>
	<div class="module-wrap">
		<div class="scrolltips">
			<span class="txt">继续上啦查看更多图文</span>
		</div>
		<div class="sku-content">
			<img src="./../../images/contet0.jpg" alt="" />
			<img src="./../../images/content.jpg" alt="" />
		</div>
	</div>
</div>
<div class="foot-space">
	<div class="sku-actionBar">
		<div class="j-bottom-bar">
			<a href="" class="btn-cart">
				<span class="mui-icon iconfont icon-gouwuche"></span>
				<span class="ui-badge">3</span>
			</a>
		</div>
		<div class="sku-button">
			<a href="" class="btn btn-addcart">加入购物车</a>
			<a href="" class="btn btn-buy">立即购买</a>
		</div>
	</div>
</div>
<!-- 分享 -->
<div id="share" class='ui-popup__container popup-bottom'>
  <div class="ui-popup__overlay"></div>
  <div class="ui-popup__modal">
	<div class="share-hd">分享到</div>
	<div class="share-cont">
		<a href="" class="share-item">
			<img src="./../../images/wx.png" alt="">
			<p>微信好友</p>
		</a>
		<a href="" class="share-item">
			<img src="./../../images/quan.png" alt="">
			<p>朋友圈</p>
		</a>
	</div>
	<div class="share-cancel close-popup">取消</div>
  </div>
</div>
<!-- 规格 -->
<div id="skuG" class='ui-popup__container popup-bottom'>
  <div class="ui-popup__overlay"></div>
  <div class="ui-popup__modal">
    <div class="sku-pop-header">
    	<div class="img-wrap"><img src="./../../images/slide.jpg" alt=""></div>
    	<div class="pop-inner-main">
    		<div class="sku-pop-price">￥99.9</div>
    		<div class="sku-info">已选“蜂蜜2盒”</div>
    	</div>
    </div>
    <div class="sku-pop-content">
		<div class="sku-list-wrap">
			<div class="title">可选</div>
			<div class="sku-items">
				<a href="javascript:;" class="checked">蜂蜜2盒</a>
				<a href="javascript:;">珍珠2盒</a>
				<a href="javascript:;">组合套装</a>
			</div>
		</div>
		<div class="sku-list-wrap">
			<div class="title">规格</div>
			<div class="sku-items">
				<a href="javascript:;" class="checked">10片</a>
				<a href="javascript:;">20片</a>
				<a href="javascript:;">30片</a>
			</div>
		</div>
		<div class="sku-list-wrap justify">
			<div class="title">购买数量</div>
			<div class="ui-count">
				<a class="ui-count__btn ui-count__decrease"></a>
				<input class="ui-count__number" type="number" value="1" />
				<a class="ui-count__btn ui-count__increase"></a>
			</div>
		</div>
    </div>
    <div class="sku-pop-button">
    	<button class="btn btn-submit">确定</button>
    </div>
  </div>
</div>
<!-- 计数 -->
<script>
  var MAX = 99, MIN = 1;
  $('.ui-count__decrease').click(function (e) {
    var $input = $(e.currentTarget).parent().find('.ui-count__number');
    var number = parseInt($input.val() || "0") - 1
    if (number < MIN) number = MIN;
    $input.val(number)
  })
  $('.ui-count__increase').click(function (e) {
    var $input = $(e.currentTarget).parent().find('.ui-count__number');
    var number = parseInt($input.val() || "0") + 1
    if (number > MAX) number = MAX;
    $input.val(number)
  })

  $('.delete-swipeout').click(function () {
    $(this).parents('.ui-cell').remove()
  })
  $('.close-swipeout').click(function () {
    $(this).parents('.ui-cell').swipeout('close')
  })
  $('.sku-items a').click(function(){
  	$(this).addClass('checked').siblings('a').removeClass('checked')
  })
</script>
<!-- slide -->
<script>
    var swiper = new Swiper('.swiper-container', {
      centeredSlides: true,
      loop:true,
      autoplay: {
        delay: 5500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
</script>
<script src="../../js/mui.min.js"></script>
	<script>
		mui.plusReady(function() {
			plus.key.addEventListener('backbutton',
				function() {
					plus.webview.currentWebview().close();
				})
		});
	</script>
</body>
</html>